<template>
  <div class="u-set-layout">
    <div class="publish-nav-menus u-set-pnvm">
        <li :class="{ 'active': curPathName == item.pathname}" v-for="(item, idx) in publishMenus" :key="idx">
          <router-link class="menu" :to="item.path">{{ item.name }}</router-link>
        </li>
    </div>
    <div class="set-layout-con">
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            publishMenus: [
                { pathname: 'personalData', name: '个人设置', path: '/personal/personalData' },
                { pathname: 'accountSet', name: '账号设置', path: '/personal/accountSet' },
                { pathname: 'passwordSet', name: '密码设置', path: '/personal/passwordSet' }
            ]
        }
    },
  computed: {
    curPathName: function () {
      return this.$route.name
    }
  }
}
</script>

<style lang="less">
.u-set-layout{
    display: flex;
    width:max-content;
    margin:0 auto;
        
    align-items: flex-start;
    .u-set-pnvm{
        margin:inherit;
        margin-right:20px;
    }
    .set-layout-con{
        min-width:795px;
        border-radius:16px;
        background:#181818;
        padding:26px 42px;
    }
}


























</style>